﻿@page "/MarkChart"

 @inject IJSRuntime JS

<h3>MarkChart</h3>

<ApexChart @ref="chart" TItem="Order"
           Title=""
           Options=options XAxisType="XAxisType.Numeric" Height="500">

    <ApexPointSeries TItem="Order"
                     Items="orders"
                     SeriesType="SeriesType.Line"
                     Name="Height"
                     XValue="@(e =>Convert.ToDecimal(  e.DiscountPercentage))"
                     YValue="@(e =>Convert.ToDecimal( e.NetValue))" />
</ApexChart>

<RadzenButton Click="DynamicClick" Text="Dynamic Annotations"></RadzenButton>
<RadzenButton Click="UpdateDataClick" Text="UpdateData"></RadzenButton>
<RadzenButton Click="Click" Text=" Annotations"></RadzenButton>
<script src="_content/Blazor-ApexCharts/js/apex-charts.min.js"></script>
<script src="_content/Blazor-ApexCharts/js/blazor-apex-charts.js"></script>

@code {

    private List<Order> orders { get; set; } = new List<Order>();
    private ApexChart<Order> chart;
    private ApexChartOptions<Order> options = new();
    private SelectionData<Order> currentSelection;

    private List<AnnotationsPoint> Points;

    private string YAxisUnit = "nm";

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 50; i++)
        {
            orders.Add(new Order
                {
                    DiscountPercentage = i + 10 + 0.55784621,
                    NetValue = new Random().Next(1, 100000) + i + 0.5,
                    Date = i,
                });
        }


        var fileName = "Country Gross Value";
        options.Chart.Toolbar = new Toolbar
            {
                Show = true,
                Export = new ExportOptions
                {
                    Png = new ExportPng { Filename = fileName },
                    Svg = new ExportSvg { Filename = fileName },
                }
            };
        options.Chart.Zoom = new Zoom
            {
                Enabled = true,
            };

        options.Xaxis = new XAxis
            {
                TickAmount = 10,//显示刻度数量
                Max = orders.Max(m => m.DiscountPercentage),
                Min = orders.Min(m => m.DiscountPercentage),
                Labels = new XAxisLabels
                {
                    Formatter = @"function (value) {
                    return Number(value).toFixed(6);}"
                }
            };

        options.Yaxis = new List<YAxis>();
        options.Yaxis.Add(new YAxis
            {
                Title = new AxisTitle
                {
                    Text = "Height",
                },
                // Labels = new YAxisLabels
                // {
                //     Formatter = @"function (value) {
                //     return Number(value).toLocaleString()+' '+ " + $"'{YAxisUnit}'" + ";}"
                // }
            });

        options.Annotations = new Annotations
            {
                Xaxis = new List<AnnotationsXAxis> {
                    new AnnotationsXAxis
                    {
                        Label = new Label {
                            Text = "X Axis 1",
                            // to avoid the annotation text to overlap the line
                             OffsetX = -25,
                             OffsetY=10,
                             Orientation= ApexCharts.Orientation.Horizontal,
                        },
                        X = 12.8,
                        X2=30.8,
                        StrokeDashArray = 2,
                        FillColor="red",
                        BorderColor = "red",
                    }
                },
                Yaxis = new List<AnnotationsYAxis>
                {
                    new AnnotationsYAxis
                    {
                        Label=new Label {
                            Text = "Y Axis 1",
                            // to avoid the annotation text to overlap the line
                             OffsetX = -25,
                             OffsetY=10,
                             Orientation= ApexCharts.Orientation.Horizontal,
                        },
                         Y=50000,
                          StrokeDashArray = 2,
                        FillColor="red",
                        BorderColor = "red",
                    },
                    new AnnotationsYAxis
                    {
                         Label=new Label {
                            Text = "Y Axis 1",
                            // to avoid the annotation text to overlap the line
                             OffsetX = -25,
                             OffsetY=10,
                             Orientation= ApexCharts.Orientation.Horizontal,
                        },
                         Y=20000,
                          StrokeDashArray = 2,
                        FillColor="red",
                        BorderColor = "red",
                    }
                },
                Points = Points,
            };
    }

    private string GetYAxisLabel(decimal value)
    {
        return $"{(value.ToString())} {YAxisUnit}";
    }

    private void DynamicClick(MouseEventArgs value)
    {
        options.Annotations = new Annotations
            {
                Xaxis = new List<AnnotationsXAxis> {
                    new AnnotationsXAxis
                    {
                        Label = new Label {
                            Text = new List<string>{ "X Axis 1" },
                             Orientation= ApexCharts.Orientation.Horizontal,
                            // to avoid the annotation text to overlap the line
                            OffsetX = -25,
                             OffsetY=10,
                        },
                        X = 12.8,
                        X2=30.8,
                        StrokeDashArray = 2,
                        FillColor="red",
                        BorderColor = "red"
                    },
                    new AnnotationsXAxis
                    {
                        Label = new Label {
                            Text = new List<string>{ "X Axis 1" },
                             Orientation= ApexCharts.Orientation.Horizontal,
                            // to avoid the annotation text to overlap the line
                            OffsetX = -25,
                             OffsetY=10,
                        },
                        X = 40.8,
                        X2=50,
                        StrokeDashArray = 2,
                        FillColor="green",
                        BorderColor = "green"
                    }
                },
            };

        chart?.UpdateOptionsAsync(false, false, false);
    }

    /// <summary>
    /// 间隔抽取数据
    /// </summary>
    /// <param name="data"></param>
    /// <param name="sampleInterval">每间隔多少点抽取一个数据</param>
    /// <returns></returns>
    /// <exception cref="ArgumentException"></exception>
    public List<Order> SampleData(List<Order> data, int sampleInterval)
    {
        if (sampleInterval <= 1)
            throw new ArgumentException("Sample interval must be greater than 1.");

        var sampledData = new List<Order>();
        for (int i = 0; i < data.Count; i += sampleInterval)
        {
            sampledData.Add(data[i]);
        }
        return sampledData;
    }

    private void UpdateDataClick(MouseEventArgs value)
    {
        orders.Clear();
        for (int i = 1; i <= 5000; i++)
        {
            orders.Add(new Order
                {
                    DiscountPercentage = (i / 10000) + 0.0000055784621,
                    NetValue = new Random().Next(1, 100000) + i + 0.5,
                    Date = i,
                });
        }
        // var data=SampleData(orders, 200);
        // orders = data;
        decimal min = (decimal)orders.Min(s => s.DiscountPercentage);
        decimal max = (decimal)orders.Max(s => s.DiscountPercentage);
        chart?.UpdateOptionsAsync(false, false, false, new ZoomOptions
            {
                Start = min,
                End = max,
            });
    }

    private void Click(MouseEventArgs value)
    {

    }

    public class Order
    {
        public decimal Date { get; set; }

        public double DiscountPercentage { get; set; }

        public double NetValue { get; set; }
    }
}
